﻿<template>
  <section :style="{ width }">
    <div class="tabs" :style="tabsStyle()">
      <div
        v-for="(item, index) in list"
        :key="index"
        @click="handleChange(index, item.id)"
        :style="tabStyle()"
      >
        <slot :obj="item" :name="item.type">{{ item.name }}</slot>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "comTabs",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultTab: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    //tabs:style
    direction: {
      type: String,
      default: "row",
    },
    borderTop: {
      type: String,
      default: "0",
    },
    borderRight: {
      type: String,
      default: "0",
    },
    borderBottom: {
      type: String,
      default: "0",
    },
    borderLeft: {
      type: String,
      default: "0",
    },

    //tab:style
    itemWidth: {
      type: Number,
      default: 100,
    },
    itemAlign: {
      type: String,
      default: "center",
    },
  },
  computed: {},
  watch: {},
  data() {
    return {
      activeTab: 0,
      width: "",
    };
  },
  mounted() {
    if (this.defaultTab != 0) {
      this.activeTab = this.defaultTab;
    }
    if (this.direction == 'row'&&this.list.length) {
      this.width = `${this.list.length * this.itemWidth}px`;
    }
  },
  methods: {
    handleChange(x, y) {
      if (!this.disabled) {
        this.activeTab = x;
        this.$emit("change", x, y);
      }
    },
    tabsStyle(){
      return {
        flexDirection:this.direction,
        borderTop:this.borderTop,
        borderRight:this.borderRight,
        borderBottom:this.borderBottom,
        borderLeft:this.borderLeft,
      }
    },
    tabStyle(){
      return {
        justifyContent: this.itemAlign
      }
    }
  },
};
</script>

<style scoped lang="less">
.tabs {
  display: flex;
  > div {
    flex: 1;
    display: flex;
  }
}
</style>